<template>
  <div class="container">
    <div class="top">
      <img class="img" src="https://pic2.zhimg.com/v2-0959a5ab24f8332f13d03356a13ee5d0_r.jpg?source=1940ef5c" alt="">
      <span>欢迎来到共享平台</span>
    </div>
    <div class="center">
      <div class="login" v-if="state.isLogin">
        <van-cell-group inset>
          <van-field v-model="state.username" clearable maxlength="11" name="username" label="手机号" placeholder="请输入手机号" />
          <van-field v-model="state.password" rightIcon="question-o" @click-right-icon="showTip" clearable type="password"
            name="password" label="密码" placeholder="请输入密码" />
        </van-cell-group>
      </div>
      <!-- register -->
      <div class="register" v-else>
        <van-cell-group inset>
          <van-field v-model="state.username" maxlength="11" clearable name="username" label="手机号" placeholder="请输入手机号" />
          <van-field v-model="state.password" rightIcon="question-o" @click-right-icon="showTip" clearable name="password"
            label="密码" type="password" placeholder="请输入密码" />
          <van-field v-model="state.confirmpassword" clearable name="password" label="确认密码" type="password"
            placeholder="请再次输入密码" />
          <van-field v-model="state.sms" center clearable name="sms" label="验证码" placeholder="请输入验证码">
            <template #button>
              <vertifyCode ref="vertify" @sentimgCode="getImgCode"></vertifyCode>
            </template>
          </van-field>
        </van-cell-group>
      </div>
    </div>
    <div class="submit">
      <van-button round block type="primary" @click="submit">
        {{ state.isLogin ? '登录' : '注册' }}
      </van-button>
    </div>
    <div class="changeBtn">
      <p @click="switchType()">
        {{ state.isLogin ? '没有账号？前往注册' : '已有账号？前往登录' }}

      </p>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import vertifyCode from '@/components/verifyCode.vue'
import { login, register } from '../api/index.ts';
import { showFailToast } from 'vant';
import { showDialog } from 'vant';
import { useRouter } from 'vue-router';
import { userStore } from '@/store';
const router = useRouter()
const vertify: any = ref(null)
const user = userStore()
const state = reactive({
  username: '',
  password: '',
  confirmpassword: '',
  isLogin: true,
  sms: '',
  imgCode: ''
})
const switchType = () => {
  state.isLogin = !state.isLogin;
}
const getImgCode = (e: string) => {
  state.imgCode = e;
}
const showTip = () => {
  showDialog({ message: '密码至少包含数字和英文,长度6-20' })
}
const submit = () => {
  const regexp = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  const passwordRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
  if (!regexp.test(state.username) || !passwordRegex.test(state.password)) {
    showFailToast('输入格式不正确')
    return
  }

  if (state.imgCode.toLocaleLowerCase() !== state.sms.toLocaleLowerCase()) {
    showFailToast('验证码不正确')
    vertify.value.changeVerify()
  }
  const data = {
    username: state.username,
    password: state.password
  }
  if (state.isLogin) {
    login(data).then((res: any) => {
      console.log(res);
      localStorage.setItem('accessToken', res.accessToken)
      localStorage.setItem('refreshToken', res.refreshToken)
      user.userInfo = res.data;
      router.push({ path: '/index' });
    })
  } else {
    if (state.confirmpassword !== state.password) {
      showFailToast('密码不一致')
      return
    }
    register(data).then(res => {
      console.log(res);
    })
  }
}

</script>

<style lang='less' scoped>
.container {
  width: 100%;
  display: grid;
  grid-template-rows: 200px 160px auto;
  justify-items: center;
  align-items: center;
  gap: 20px;

  .top {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 20px;

    .img {
      width: 100px;
      height: 100px;
      border-radius: 10px;
    }
  }

  .center {
    width: 100%;
  }

  .submit {
    width: 80%;
  }

  .changeBtn {
    margin-top: 20px;
  }
}
</style>
